<template>
	<view class="container">
		<view class="form-content">
			<view class="form-item cu-form-group">
				<view class="title">姓名</view>
				<view>{{items.name}}</view>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">工号</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="job_number" />
			</view>
			<view class="cu-form-group">
				<view class="title">入职时间</view>
				<picker mode="date" :value="entry_time || 0" :start="computedStartDate" @change="entryTimeChange">
					<view class="picker">
						{{entry_time || '请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">签约方式</view>
			</view>
			<view class="uni-form-item uni-column">
				<radio-group name="radio" class="flex change-flex" @change="radioChange">
					<view class="flex lab">
						<radio class='blue radio mr-10' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="1" />
						<text class="mr-1">已在线签署合同</text>
					</view>
					<view class="flex lab">
						<radio class='blue radio mr-10' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="2" />
						<text>已签署纸质合同</text>
					</view>
				</radio-group>
			</view>
			<!-- <view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view> -->
			<view class="cu-form-group set-mar" v-if='changeShow'>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img">
						<image :src="imgList" mode="aspectFill" @tap="uploadImage" v-if="picShow"></image>
						<!-- <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view> -->
					</view>
					<view class="solids" @tap="uploadImage" v-if="iconShow">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">档案编号</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="archives" />
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">合同签订日期</view>
				<picker mode="date" :value="date || 0" start="2015-09-01" end="2040-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view> -->
			<view class="form-item cu-form-group">
				<view class="title">协议类型</view>
				<picker @change="pactTypeChange" :value="index1" :range="pactType" range-key="name">
					<view class="picker">
						{{index1>0?pactType[index1].name:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">合同开始时间</view>
				<picker mode="date" :value="startDate || 0" :start="computedStartDate" @change="startDateChange">
					<view class="picker">
						{{startDate || '请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">合同结束时间</view>
				<picker mode="date" :value="endDate || 0" :start="computedEndDate" @change="endDateChange">
					<view class="picker">
						{{endDate || '请选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">交纳保险</view>
				<picker @change="PickerChange" :value="index" :range="picker" range-key="name">
					<view class="picker">
						{{index>0?picker[index].name:'请选择'}}
					</view>
				</picker>
			</view>
		</view>
		<view class="btn-item submit-btn-item flex rcc" @tap="handleClickConfirm">
			<text class="btn-item-title">确定</text>
		</view>
	</view>
</template>
<script>
	import aliOss from '../../components/ali-oos/ali-oos/index.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				msg: '',
				changeShow: false,
				picShow: false,
				iconShow: true,
				index: 0,
				picker: [],
				// 协议类型
				pactType: [],
				index1: 0,
				time: '12:01',
				date: '',
				items: {}, //上个页面传过来的数据
				// 图片上传
				imgList: '',
				// 后台需要的数据
				startDate: '',
				endDate: '',
				entry_time: '', //入职时间
				online: '', //合同签订方式
				insurance_category: '', //投保类型
				pact_type: '', //协议类型
				contract_path: '', //纸质的话需要上传文件
				job_number: '', //工号
				archives: '', //档案编号
				token: '',
			}
		},
		// 接受上个页面的数据
		onLoad(option) {
			if (option.item != undefined) {
				let item = JSON.parse(option.item)
				console.log('item---->', item);
				this.items = item;
			}
			// console.log("传过来了吗",option.item)
		},
		computed: {
			computedStartDate() {
				return this.getDate('start');
			},
			computedEndDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					month = month + 3;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			async getNum() {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.contractOption;
				let data = {
					company_id: this.items.company_id, //企业id
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					// console.log("什么数据",res.data.data);
					// this.$parent.getFilterList();
					this.job_number = result.data.job_number;
					this.archives = result.data.archives
					this.picker = result.data.insurance_category
					this.pactType = result.data.pact_type;
				}

			},
			// 签订合同类型选择
			radioChange(e) {
				uni.hideKeyboard();
				this.online = e.detail.value;
				// console.log(e.detail.value)
				if (e.detail.value == '1') {
					this.changeShow = false;
				} else if (e.detail.value == '2') {
					this.changeShow = true;
				}
			},
			// 点击确定发请求
			async handleClickConfirm() {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage && prevPage.setData && prevPage.setData({
					isDoRefresh: true
				});
				this.getToken()
				// 发请求
				let url = this.ServicesApi.prepareThrough;
				let data = {
					jlog_id: this.items.jlog_id,
					personnel_id: this.items.id,
					entry_time: this.entry_time, //入职时间
					online: this.online, //合同签订方式
					insurance_category: this.insurance_category, //投保类型
					pact_type: this.pact_type, //协议类型
					contract_path: this.contract_path, //纸质的话需要上传文件
					start_time: this.startDate, //合同开始日期
					end_time: this.endDate, //合同结束日期
					job_number: this.job_number, //工号
					archives: this.archives, //档案编号
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
					}, 1500);
					// this.$parent.getFilterList();
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
				}
			},
			// 缴纳保险
			PickerChange(e) {
				uni.hideKeyboard();
				this.index = e.detail.value
				this.insurance_category = this.picker[this.index].id
			},
			pactTypeChange(e) {
				uni.hideKeyboard();
				this.index1 = e.detail.value
				this.pact_type = this.pactType[this.index1].id
			},
			// DateChange(e) {
			//	uni.hideKeyboard();
			// 	this.date = e.detail.value
			// 	console.log(this.date)
			// 	console.log(typeof(this.date))
			// },
			// 入职时间
			entryTimeChange(e) {
				uni.hideKeyboard();
				this.entry_time = e.detail.value
			},
			// 合同开始时间
			startDateChange(e) {
				uni.hideKeyboard();
				this.startDate = e.detail.value
			},
			// 合同结束时间
			endDateChange(e) {
				uni.hideKeyboard();
				this.endDate = e.detail.value
			},
			// 图片上传
			async uploadImage() {
				let options = {
					count: 1,
				}
				let res = await aliOss.chooseImage(options);
				// console.log('uploadImage---->', res);
				if (res.code === 1) {
					this.picShow = true;
					this.iconShow = false;
					let up_res = await aliOss.uploadImage(res.data);
					// console.log('up_res---->', up_res);
					if (up_res.code === 1) {
						let {
							data
						} = up_res;
						this.contract_path = data[0].name_server
						this.imgList = data[0].path_server
						// console.log('是正面吗',data[0]);
					}
				}
			},
		},
		mounted() {
			this.getNum();
		}
	}
</script>
<style scoped lang="stylus">
	.container {
		padding-bottom: 50rpx;
	}

	.msg {
		height: 100upx;
		color: red;
	}

	.solids {
		margin-left: -150upx;
	}

	.uni-column {
		margin-bottom: 40upx;
	}

	.set-mar {
		margin-top: 32upx;
	}

	.height_set {
		height: 358upx;
	}

	.change-flex {
		flex-direction: column;

		.lab {
			margin-top: 30upx;
			font-size: 30upx;
			font-weight: normal;
			align-items: center;
			color: rgba(51, 51, 51, 1);

			.circle {
				margin-right: 10upx;
				margin-left: 24upx;
			}
		}
	}

	.title {
		font-size: 30upx;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.form-content {
		padding-left: 30upx;
		background: #fff;
	}

	.upload-btn-icon {
		width: 260upx;
		height: 260upx;
	}

	.upload-camera {
		width: 80upx;
		height: 80upx;
	}

	.submit-btn-item {
		flex: 1;
		height: 80upx;
		color: #FFFFFF;
		font-size: 30upx;
		border-radius: 4upx;
		margin: 100rpx 50rpx;
		background: linear-gradient(270deg, rgba(0, 106, 231, 1) 0%, rgba(66, 157, 255, 1) 100%);
	}
</style>
